<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./static/config/fun.ico" type="image/x-icon">
    <title>{{title}}</title>
    <link rel="stylesheet" href="./static/css/workbench.css">
    <script src="./static/js/jquery-3.7.1.js"></script>
    <!-- <script src="../static/workbench.js"></script> -->
    <script src="./static/js/workben.js"></script>
</head>

<body>
    <!-- 头部信息 -->
    <div class="title">
        <!-- LOGO图片 -->
        <div class="logo"><img src="./static/config/logo.png" alt="LOGO-{{title}}"></div>
        <!-- 平台名称信息 -->
        <div class="platform_name"><span>{{title}}</span></div>
        <!-- 加载登录信息 -->
        <div class="login_info">
            <span>欢迎您：{{username}}</span><br>
            <button onclick="not_function()">反馈</button>
            <button onclick="not_function()">消息</button>
            <button onclick="not_function()">退出登录</button>
        </div>
    </div>
    <!-- 一级菜单加载 -->
    <div class="menus" id="menus">
    </div>
    <hr style="border-color: blue; width: 91vw; float: right">
    <!-- 二级菜单加载 -->
    <div class="data_menu" id="data_menu">
    </div>
    <!-- 数据页面加载 -->
    <div class="data_page" id="data_page">
        <!-- 搜索框 -->
        <!-- <div id="container"></div> -->
        <!-- 数据表 -->
        <!-- <div class="data_tab" id="data_table"></div> -->
        <div style="display: flex; align-items: center; margin-top: 15vh;">
            <img src="./static/config/londing.png" style="width: 30vw; height: auto; margin-left: 8vw;" alt="">
            <h2 style="margin-left: 10vw;">欢迎进入工作台小助手管理后台</h2>
        </div>
    </div>
</body>

</html>
<script>
    var load_id = ""; // 存储当前被修改背景颜色的元素ID
    // 样式更新 - 颜色
    function background_color(id_name) {
        // 点击时的颜色
        const colore_val = 'white'; // 使用const，因为此变量的值不会改变
        // 还原的颜色
        const old_col = 'rgba(193, 246, 255, 0.675)'; // 修正变量名
        console.log(`修改ID=${id_name}的背景颜色`);

        // 检查元素是否存在
        const element = document.getElementById(id_name);
        if (element) {
            element.style.backgroundColor = colore_val;

            // 还原上一个ID的颜色（如果存在）
            if (load_id !== "") {
                console.log(`恢复${load_id}的背景颜色`);
                const prevElement = document.getElementById(load_id);
                if (prevElement) { // 确保上一个元素也存在
                    prevElement.style.backgroundColor = old_col;
                }
            }

            // 更新当前ID
            load_id = id_name;
        } else {
            console.error(`未找到ID为${id_name}的元素`);
        };
        // add_data_page(temp_data)
        // alert(id_name)
        // TODO 加载页面
    };
    loading_menus();
</script>